<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        html{
            background: #a6cfd7;
        }

        div{
            position: relative;
            transition: all 0.3s;
            margin: auto;
            top:300px;
            width: 60px;
            height: 60px;
            border-radius: 999px;
        }

        span{
            position: absolute;
            display: block;
            background:white;
            transition: all 0.3s;
            border-radius: 999px;
        }

        /*normal*/
        .menu{
            box-shadow: none;
        }

        .menu span:first-child{
            width: 32px;
            height: 5px;
            margin-top: 18px;
            margin-left: 14px;
        }

        .menu span:nth-child(2){
            width: 32px;
            height: 5px;
            margin-top: 28px;
            margin-left: 14px;
        }

        .menu span:last-child{
            width: 32px;
            height: 5px;
            margin-top: 38px;
            margin-left: 14px;
        }

        /*close*/
        .menu.active{
            box-shadow:0 0 0 4px white;
        }

        .menu.active span:first-child{
            transform:rotate(45deg);
            width: 40px;
            height: 5px;
            margin-top: 27px;
            margin-left: 10px;
        }

        .menu.active span:nth-child(2){
            width: 0;
            height: 5px;
            margin-top: 28px;
            margin-left: 14px;
        }

        .menu.active span:last-child{
            transform:rotate(-45deg);
            width: 40px;
            height: 5px;
            margin-top: 27px;
            margin-left: 10px;
        }

    </style>
</head>
<body>
<div class="menu">
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
<script>
    $('.menu').click(function(){
        var $this = $(this);
        if($this.hasClass('active')){
            $this.removeClass('active');
        }else{
            $this.addClass('active');
        }
    })
</script>
</html>